<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .haha{
            width: 300px;
            height: 160px;
            background-color: #ffa19d;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="addCls">点我增加样式</button>
    <!--v-bind实现了普通属性向vue属性的转换，
   vue的属性具备可以赋值一个vue的变量，
   进而引用这个变量的值，相当于把原始的双引号变成了一个可以运算的空间-->
    <div v-bind:class="st">哈哈</div>

</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm=new Vue({
        el:"#app",
        data:{
            st:""
        },
        method:{
            addCls(){
                this.st="haha"
            }
        }
    });


</script>
</body>
</html>